!function () {
    function transIn(target,val){
        anime({
            targets:target,
            translateY:{
                value:val,
                duration:500,
                easing:'easeInOutSine'
            }
        });
    }
    function transOut(target,val){
        anime({
            targets:target,
            translateY:{
                value:val,
                duration:500,
                easing:'easeInOutSine'
            }
        });
    }

//卡牌家族
    var navablilityitem = $('#nav-ability-item');
    var navablilitywrapper = $('#nav-ability-wrapper');
    var navablilitytimeline = anime.timeline({
        direction: 'normal',
        autoplay: true
    });
    navablilityitem.on('mouseover',function(){
        if(!navablilityitem.hasClass('unfold')){
            transIn('#nav-ability-wrapper',500);
            navablilitytimeline.add({targets:'#nav-ability-wrapper .product1',opacity:{value:1,duration:500,easing:'easeInSine'},translateX:{value:0,duration:500,easing:'easeInSine'},offset:400})
                .add({targets:'#nav-ability-wrapper .product2',opacity:{value:1,duration:500,easing:'easeInSine'},translateX:{value:0,duration:500,easing:'easeInSine'},offset:500})
                .add({targets:'#nav-ability-wrapper .product3',opacity:{value:1,duration:500,easing:'easeInSine'},translateX:{value:0,duration:500,easing:'easeInSine'},offset:600})
                .add({targets:'#nav-ability-wrapper .product4',opacity:{value:1,duration:500,easing:'easeInSine'},translateX:{value:0,duration:500,easing:'easeInSine'},offset:700})
                .add({targets:'#nav-ability-wrapper .product5',opacity:{value:1,duration:500,easing:'easeInSine'},translateX:{value:0,duration:500,easing:'easeInSine'},offset:800});
            navablilityitem.addClass('unfold');
        }
    });
    navablilitywrapper.on('mouseleave',function(){
        if(navablilityitem.hasClass('unfold')){
            transOut('#nav-ability-wrapper',0);
            navablilityitem.removeClass('unfold');
        }
    });

//了解能量逗
    var navcompanyitem = $('#nav-company-item');
    var navcompanywrap = navcompanyitem.find('.dropdown-menu');
    navcompanyitem.on('mouseover',function () {
        if(navablilityitem.hasClass('unfold')){
            transOut('#nav-ability-wrapper',0);
            navablilityitem.removeClass('unfold');
        }
        if (!navcompanyitem.hasClass('open'))
            navcompanyitem.addClass('open');
    });
    navcompanywrap.on('mouseleave',function () {
        if (navcompanyitem.hasClass('open'))
            navcompanyitem.removeClass('open');
    });


    $('.nav-fold-btn').on('mouseover',function(){
        if(navablilityitem.hasClass('unfold')){
            transOut('#nav-ability-wrapper',0);
            navablilityitem.removeClass('unfold');
        }
        if(navcompanyitem.hasClass('open')) navcompanyitem.removeClass('open');
    });
}();